<template>
    <v-chart class="chart" :option="option" v-if="JSON.stringify(option) != '{}'" />
</template>

<script setup lang="ts">
import { installationPlan } from "@/api/modules";
import { color } from "echarts";
import { graphic } from "echarts/core";
import { ElMessage } from "element-plus";
import { ref, reactive, onMounted, nextTick } from "vue";

const option =ref({})

function getData(){
    installationPlan().then((res)=>{
        console.log(res,'===>centerBottom');
        if(res.success){
            setOption(res.data)
        }else{
            ElMessage({
          message: res.msg,
          type: "warning",
        });
        }
    }).catch(err=>{
        ElMessage.error(err);
    })
}

function setOption(newData:any){
option.value={
    tooltip:{
        trigger:'axis',
        backgroundColor:'rgba(0,0,0,0.6)',
        borderColor:'rgba(147,235,248,0.8)',
        textStyle:{
            color:'#fff'
        },
        formatter:function(params:any){
            var result = params[0].name + "<br>"
            params.forEach(function(item:any) {
                if(item.value){
                    if(item.seriesName == '安装率'){
                        result += item.marker + " " + item.seriesName + " : " + item.value + "%</br>"
                    }else{
                        result += item.marker + " " + item.seriesName + " : " + item.value + "个</br>"
                    }
                }else{
                    result += item.marker + " " + item.seriesName + " : -</br>"
                }
            });
            return result
        }
    },
    legend:{
        data:['已安装','计划安装','安装率'],
        textStyle: {
            color: "#B4B4B4",
            },
        top: "0",
    },
    grid:{
        left: "50px",
        right: "40px",
        bottom: "30px",
        top: "20px",
    },
    xAxis:{
        data:newData.category,
        axisLine:{
            lineStyle:{
                color:'#B4B4B4'
            }
        },
        axisTick:{
            show:false
        }
    },
    yAxis:[
    {
        splitLine: { show: false },
        axisLine: {
          lineStyle: {
            color: "#B4B4B4",
          },
        },

        axisLabel: {
          formatter: "{value}",
        },
      },
      {
        splitLine: { show: false },
        axisLine: {
          lineStyle: {
            color: "#B4B4B4",
          },
        },

        axisLabel: {
          formatter: "{value}",
        },
      },
    ],
    series:[
    {
            name:'已安装',
            type:'bar',
            barWidth:10,
            itemStyle:{
                borderRadius:5,
                color: new graphic.LinearGradient(0,0,0,1,[
                {offset:0,color:'#956fd4'},
                {offset:1,color:'#3EACE5'}
                ])
            },
             data: newData.barData,
        },
        {
            name:'计划安装',
            type:'bar',
            barGap: "-100%",
            barWidth:10,
            itemStyle:{
                borderRadius:5,
                color: new graphic.LinearGradient(0,0,0,1,[
                { offset: 0, color: "rgba(156,107,211,0.8)" },
                { offset: 0.2, color: "rgba(156,107,211,0.5)" },
                { offset: 1, color: "rgba(156,107,211,0.2)" },
                ])
            },
            z: -12,
            data: newData.lineData,
        },
      {
        name: "安装率",
        type: "line",
        smooth: true,
        showAllSymbol: true,
        symbol: "emptyCircle",
        symbolSize: 8,
        yAxisIndex: 1,
        itemStyle: {
          color: "#F02FC2",
        },
        data: newData.rateData,
      },
    ]

}
}
onMounted(()=>{
    getData()
})
</script>

<style scoped>

</style>